<template>
  <div>
    <div v-if="show == false" >

      <!-- 网络错误 -->
      <!-- <van-empty image="network" description="加载中，亲稍后"  class="custom-image"/> -->
      <transition name="fade" mode="out-in" >
     <van-loading
        size="100px"
        vertical
        type="spinner"
        text-size="30px"
        color="#919191"
        class="custom-image"
        >加载中...</van-loading
      >
      </transition>
 


    </div>
    <div v-else style="width:100%;position:relative">
      <van-nav-bar
        :title="cinemaMsg.cinema.name"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      >
        <template #left>
          <van-icon name="arrow-left" />
        </template>
      </van-nav-bar>
      <van-notice-bar
        left-icon="volume-o"
        text="特殊时期已为您适当调整座位间安全距离,观影者需进行实名登记即可购票，感谢您的理解!"
      />

      <!--这里处理item的行数 -->
      <div
        style="width:100%;overflow:scroll;white-space:nowrap;height:300px ;text-align:center"
        @mousewheel="scrollMenu($event)"
      >
        <transition-group name="fade" mode="out-in">
          <div v-for="item in maxNum" :key="item">
            <div
              v-for="(itemm, index) in rowColumn[item - 1].column"
              :key="itemm + index"
              style="display:inline-block"
            >
              <i
                class="iconfont"
                @click="changeImg($event, item, itemm)"
                style="color:null"
                :ref="index"
                >&#xe613;</i
              >
            </div>
          </div>
        </transition-group>
      </div>

      <!-- 这里是排座信息 -->

      <!-- 第一个 -->
      <van-cell style="" >
      <template #label>
        {{getWeek}}
          {{schedulesImg.hallName+schedulesImg.filmLanguage+schedulesImg.imagery}}
         </template>
        <template #title>
          <span class="custom-title">{{ cinemaMsg.film.name }}</span>
        </template>
        <template #extra>
          <span
            class="custom-title"
            style="color:red"
            @click="eventCheck($event)"
            >切换场次<van-icon name="arrow-down"
          /></span>
        </template>
      </van-cell>
      <!-- 第二个 -->
      <transition name="fade" mode="out-in">
        <div
          style=" width:100%; overflow-x:scroll; white-space:nowrap;display:inline-block;"
          v-focus="active"
          v-if="showTwo == true"
        >
          <van-button
            type="primary"
            v-for="(item, index) in schedules"
            :key="index"
            style="width:80px;height:50px;margin:10px;color:black;backgroundColor:rgb(248,248,248);border:none"
            @click="vanBtnClick($event, index, item.scheduleId)"
          >
            <div style="font-size:14px">
              {{ (new Date(parseInt(item.showAt) * 1000).getHours() ) &lt;10 ? "0"+ new Date(parseInt(item.showAt) * 1000).getHours(): new Date(parseInt(item.showAt) * 1000).getHours()


              }}:
              {{ (new Date(parseInt(item.showAt) * 1000).getMinutes() )&lt;10 ?"0"+new Date(parseInt(item.showAt) * 1000).getMinutes() :new Date(parseInt(item.showAt) * 1000).getMinutes() }}
            </div>
            <div style="font-size:12px">
              {{ item.filmLanguage + item.imagery }}
            </div>
            <div>&yen;{{ item.salePrice / 100 }}</div>
          </van-button>
        </div>
      </transition>
      <!-- 第3个 -->
      <div
        style=" width:100%; overflow-x:scroll; white-space:nowrap;display:inline-block;"
      >
        <van-button
          type="primary"
          v-for="(item, index) in list"
          :key="index"
          style="width:80px;height:50px;margin:10px;color:black;backgroundColor:rgb(248,248,248);border:none"
          @click="deleteSeat(item, index)"
        >
          <div>{{ item.coloumSeat }}排{{ item.rowSeat }}座</div>
          <div>&yen;{{ item.price / 100 }}</div>
        </van-button>
      </div>

      <!-- 选座购票 -->

      <van-tabbar>
        <van-tabbar-item @click="pushRouter"
          >{{ maxPrice / 100 }}元,购买</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import requestCinema from "../../request-get/cinema-chose-seat-cinema.js";
import requestSeat from "../../request-get/cinema-chose-seat.js";
import mixin from "../../request-get/ToCinema-request-mixin.js";

export default {
  name: "choseseat",
  data() {
    return {
      cinemaMsg: "",
      // 椅子数
      seatingChart: "",
      // 所有院线信息场次
      schedules: "",
      // 当前场次的img
      schedulesImg: "",
      // 院线信息场次id
      scheduleId: "",
      show: false,
      // 椅子是否变色
      showGreen: false,
      maxNum: 0,
      // 这是行列数
      rowColumn: [],
      // 滚轮事件值
      scrollNum: 0,
      // 点亮哪个场次
      active: null,
      // 点击哪个座位
      rowSeat: null,
      coloumSeat: null,
      // 这个数组用来遍历多少价格 片源和 位置(这是最后提交的 后端交互)
      list: [],
      // 总价
      maxPrice: 0,
      // show 第二个
      showTwo: false,
    };
  },
  created() {
    this.onload();
  },
  computed:{
    getWeek(){
      // 164288551  1634918400
      var date = new Date();
      var weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      // console.log(this.schedulesImg.showAt);
      let x = new Date(parseInt(this.schedulesImg.showAt) * 1000);
      // console.log(x);
      let month = x.getMonth();
      let day = x.getDate();
      let dayNow = x.getDay();
      // console.log(day);
      if (day - date.getDate() < 1) {
        return "今天" + (month+1) + "月" + day + "日";
      } else if (day - date.getDate() == 1) {
        return "明天" + (month+1) + "月" + day + "日";
      } else if (day - date.getDate() == 2) {
        return "后天" + (month+1) + "月" + day + "日";
      } else {
        return weeks[dayNow] + (month+1) + "月" + day + "日";
      }
     
    }
  },
  mounted() {},
  methods: {
    // 场次点击事件
    async vanBtnClick(e, index, scheduleId) {
      // console.log(this.active,"切换擦皇城");
      // 切换场次信息嗷
      this.schedulesImg=this.schedules[index]
      this.maxPrice = 0;
      if (this.list.length) {
        this.list.splice(0, this.list.length);
      }
      this.maxNum = 0;
      this.rowColumn = [];
      // 匹配scheduleId即可
      // 遍历mixin 的数组
      for (let i = 0; i < e.target.parentNode.children.length; i++) {
        e.target.parentNode.children[i].style.color = "black";
      }
      e.target.style.color = "red";
      // console.log(index);
      // console.log(scheduleId, "scheduleId");
      this.scheduleId = scheduleId;
      let x = await requestSeat(scheduleId);
      this.seatingChart = null;
      this.seatingChart = x.seatingChart;
      // 重排
      this.SeatList();
      // console.log(x, "这个七块");
    },
    // 切换场次
    eventCheck(e) {
      // console.log(e.target.parentNode.nextSibling);
      //  e.target.parentNode.nextSibling.style.width=  50+"px"
      this.showTwo = !this.showTwo;
      //  bottom:50px
    },
    // 滚轮事件
    scrollMenu(e) {
      if (e.wheelDelta > 0) {
        //当鼠标滚轮向上滚动时
        this.scrollNum++;
        e.target.style.transform = "scale(" + this.scrollNum + ")";
        e.target.style.transformOrigin = "0 0";
      }
      if (e.wheelDelta < 0) {
        //当鼠标滚轮向上滚动时
        this.scrollNum--;
        e.target.style.transform = "scale(" + this.scrollNum + ")";
        e.target.style.transformOrigin = "0 0";
      }
    },

    // 点击添加椅子样式
    changeImg(e, item, itemm) {
      if (e.target.style.color != "green") {
        e.target.style.color = "green";
        // this.showGreen = true;
        console.log(item, itemm);
        // 设置行列位置椅子
        this.coloumSeat = item;
        this.rowSeat = itemm;
        let newI = null;
        for (let i = 0; i < this.schedules.length; i++) {
          if (this.scheduleId == this.schedules[i].scheduleId) {
            newI = i;
          }
        }
        if (!newI) {
          newI = 0;
        }
        // console.log(newI, "这是newI");
        // 这里要设置一个数组在上面遍历
        this.list.push({
          coloumSeat: item,
          rowSeat: itemm,
          price: this.schedules[newI].salePrice,
        });

        //  console.log(this.list, "等下要选然的数组");

        this.maxPrice = 0;
        for (let ite of this.list) {
          this.maxPrice += ite.price;
        }

      } else {
        // 这里注意取反了
        e.target.style.color = "black";
        for (let i = 0; i < this.list.length; i++) {
          if (
            this.list[i].coloumSeat == item &&
            this.list[i].rowSeat == itemm
          ) {
            this.list.splice(i, i + 1);
          }
        }
        this.maxPrice = 0;
        for (let ite of this.list) {
          this.maxPrice += ite.price;
        }


      }
    },
    // 删除椅子
    deleteSeat(item, index) {
      // 删除列表单项
      this.list.splice(index, index + 1);
      // 删除样式
      // console.log(this.$refs); //coloumSeat rowSeat
      this.$refs[item.rowSeat - 1][item.coloumSeat - 1].style.color = "black";
              this.maxPrice = 0;
        for (let ite of this.list) {
          this.maxPrice += ite.price;
        }
    },

    pushRouter() {
      console.log("跳转");
    },
    // 初始化加载
    async onload() {
      console.log(this.$route.query.scheduleId);
      const x1 = await requestCinema(this.$route.query.scheduleId);
      console.log(x1.schedule);
      this.cinemaMsg = x1.schedule;
      const x2 = await requestSeat(this.$route.query.scheduleId);
      this.scheduleId = this.$route.query.scheduleId;
      console.log(x2.seatingChart);
      this.seatingChart = x2.seatingChart;
      console.log(this.seatingChart);
      const x3 = await mixin(
        this.$route.query.filmId,
        this.$route.query.cinemaId,
        this.$route.query.date
      );
      this.schedules = x3.data.data.schedules;
      // console.log(this.schedules, "zhege");

      if (x1 && x2 && x3) {
        this.show = true;
      }
      // 设置椅子
      this.SeatList();
      // 设置active场次
      this.setActive();
     
    },
    setActive() {
      for (let i = 0; i < this.schedules.length; i++) {
        if (this.schedules[i].scheduleId == this.$route.query.scheduleId) {
          this.active = i;
          // console.log(this.active);
          // console.log(i);
        }
      }
      this.schedulesImg=this.schedules[this.active]

    },
    SeatList() {
      /*
        1.先遍历行数
        2.根据行数重新遍历座位数
        3.dom渲染
        */
      this.maxNum = 0;
      for (let item in this.seatingChart.seats) {
        if (Number(this.seatingChart.seats[item].rowNum) > this.maxNum)
          // console.log(this.seatingChart.seats[item]);
          this.maxNum = Number(this.seatingChart.seats[item].rowNum);
      }
      // console.log(maxNum, typeof maxNum);
      // 获取到最大行数后
      for (let i = 1; i <= this.maxNum; i++) {
        const arr = this.seatingChart.seats.filter((item) => {
          return item.rowNum == i;
        });
        this.rowColumn.push({ row: i, column: arr.length });
      }
      // console.log(this.rowColumn);
    },
  },
  // 自定义指令 绑定active 实现默认选择场次
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el, binding) {
        // console.log(el);

        if (binding.value != null) {
          el.children[binding.value].style.color = "red";
        }
      },
    },
  },
};
</script>

<style scoped>
@font-face {
  font-family: "iconfont"; /* Project id 2878385 */
  src: url("//at.alicdn.com/t/font_2878385_oxleiicgign.woff2?t=1634635143149")
      format("woff2"),
    url("//at.alicdn.com/t/font_2878385_oxleiicgign.woff?t=1634635143149")
      format("woff"),
    url("//at.alicdn.com/t/font_2878385_oxleiicgign.ttf?t=1634635143149")
      format("truetype");
}
.iconfont {
  font-family: "iconfont";
  font-size: 36px;
  font-style: normal;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(20%);
}
/* 动画 */
.top-div,html,body{
  width: 100%;
  height: 100%;
}
.custom-image {
   transform: translateY(150%);
}

</style>
